<template>
	<!-- 发表评论页面 -->
	<view class='issue'>
		<view class="issue-head">
			<slot name="headPic"></slot>
			<image v-if="headPicShow" :src="headPicValue" class="issue-head-pic" mode=""></image>
			<!-- 五星好评 -->
			<text v-if="headTitleShow" class="issue-head-title">{{headTitleValue.slice(0,5)}}</text>
			
			<view class="issue-head-star-box" v-if="starsShow">
				<image v-for="(item,index) in starsMax" :key="index" :src="(index+1)>formatScore?starDefault:starActive" :class="formatScore==index+1?'active':''" mode="" @click="setScore(index+1)"></image>
			</view>
		</view>
		<!-- @blur防抖 -->
		 <textarea v-if="textareaShow" @blur="blur" :value="infoReceive.textareaValue" :placeholder="textareaPlaceholder"/>
		 <!-- 上传图片 -->
		 <view class="fb_tool">
		    <button @click="handleChangeImg()">+</button>
		    <view class="up_img_item"
			 v-for="(item,index) in chooseImages"
			 @click="handleRemoveImg(index)"
			>
			  <!-- 将每一次遍历出的url传给组件 -->
		 	  <UpImg :src="item"></UpImg>
		    </view>
		 </view>
		 <!-- 上传图片 -->
		 
		 <view class="issue-btn-box">
		 	<button v-if="submitShow" class="submit-btn" type="primary" @click="doSubmit()">{{submitText}}</button>
			<slot name="submit"></slot>
		 </view>
	</view>
</template>
<script>
	import UpImg from '../../components/upImg.vue';
	export default {
		components: {
			UpImg
		},
		data(){
			return{
				//图片
				headPicShow:true,
				//标题
				headTitleShow:true,
				//描述
				headTitleValue:'描述相符',
				starsShow:true,
				// 星星最大个数
				starsMax:5,
				//未选中
				headPicValue:require('@/static/imgs/st_pic.png'),
				starDefault:require('@/static/imgs/st_star.png'),
				starActive:require('@/static/imgs/st_star_active.png'),
				score:0,
				starsDisabled:false,
				textareaShow:true,
				textareaPlaceholder:"宝贝满足你的期待吗？说说你的使用心得，分享给想买的他们吧",
				submitShow:true,
				submitText:"发布",
				//获取值
				infoReceive:{
					score:0,
					textareaValue:""
				},
				//用于页面展示的/存放图片
				chooseImages:[],
				//file对象
				file:[],
				//传给后台插入数据库的对象
				commentAll:{
					//商品Id
					commodityid:0,
					//订单id
					orderId:0,
					//订单编号
					orderSn:"",
					//用户表的用户ID
					userStaid:1,
					//评论内容
					content:"",
					//如果type=0，则是商品评论；如果是type=1，则是专题评论
					//这里默认是0
					type:0,
					//是否含有图片,0没有，1有
					haspicture:0,
					//评分，1-5
					star:0,
					//图片地址列表数组
					urlAft:[]
				}
			}
		},
		//页面加载事件
		onLoad(options) {
			//获取商品id，用户id
			this.commentAll.commodityid = options.commodityid;
			this.commentAll.userid = 1;
			//获取订单id,订单编号
			this.commentAll.orderId = options.orderId;
			this.commentAll.orderSn = options.orderSn;
		},
		computed:{
			formatScore(){
				return this.infoReceive.score
			}
		},
		methods: {
			//设置五星好评
			setScore(score){
				if(this.starsDisabled!==false)return
				this.infoReceive.score=score
				this.commentAll.star = score;
				// console.log(this.commentAll.star)
				
			},
			
			//获取textarea的内容
			blur(e){
				this.infoReceive.textareaValue=e.detail.value
				this.commentAll.content = e.detail.value
				// console.log(this.commentAll.content)
			},
			
			//上传图片按钮 加号
			handleChangeImg(){
				if(this.exceed()){return;}
				//内置图片接口
				uni.chooseImage({
					count: 5, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success:(res) => {
						//将图片路径以追加的方式放入chooseImages
						this.chooseImages = this.chooseImages.concat(res.tempFilePaths);
						//获取file
						this.file = this.file.concat(res.tempFiles);
						//规定只能上传最多5张图片
						this.exceed();
					}
				});
			},
			
			//判断上传图片超过五张的处理与提示 , 返回值为true
			exceed(){
				if(this.chooseImages.length > 5){
					//删除下标5和5之后的图片
					this.chooseImages.splice(5,10);
					uni.showToast({
						title: '提示：超出图片上限！',
						icon: 'none'
					});
					return true;
				}else if(this.chooseImages.length === 5){
					uni.showToast({
						title: '提示：图片最多上传五张',
						icon: 'none'
					});
					return true;
				}
				return false;
			},
			
			//点击自定义图片组件红叉，删除列表中的图片
		    handleRemoveImg(index){
			  const Index = index;
              this.chooseImages.splice(index,1);
			  this.file.splice(index,1);
		    },


            //提交按钮  
		     doSubmit(){
				//判断用户是否评分
				if(this.commentAll.star === 0){
					uni.showToast({title: '提示：求亲给个五星好评',icon: 'none'});
					return;
				}
				//去除空格，判断评论是否合法
				if(!this.commentAll.content.trim()){
					uni.showToast({title: '提示：评论内容不能为空！',icon: 'none'});
					return;
				}
				//判断用户是否上传图片
				if(this.chooseImages.length !== 0){
					 this.commentAll.haspicture = 1;
					 //1 上传图片
					 this.doImage();
					 //2 平均一张图片延时2秒
					 let timeOut = this.chooseImages.length*2000;
					 //3 延时执行是为了等doImage执行完，这样才能拿到this.commentAll.urlAft
					 setTimeout(()=>{
					 	//4 调用方法访问后台新增评论接口
					 	this.$api.reqPost({
					 		url:'ygComment/insertComment',
					 	    data:this.commentAll
					 	})
						//5 取消加载
						uni.hideLoading();
						//6 跳转
						this.toOrder();
					 },timeOut)
				}else{
					uni.showLoading({title:"正在提交"})
					setTimeout(()=>{
						//没上传图片的情况
						this.$api.reqPost({
							url:'ygComment/insertComment',
						    data:this.commentAll
						})
						//6 跳转
						this.toOrder();
					},500)
				}
				
			},
			//提交图片
			doImage(){
				//显示正在上传
				uni.showLoading({title:"正在提交"})
				//1 遍历图片向后台接口传输，后台操作图片上传图片服务器
				this.chooseImages.forEach(item=>{
					 uni.uploadFile({
						count:5,
						//压缩图
						sizeType:'compressed', 
						//图片要上传到那里
						url: 'http://localhost:8093/storage/commentImg',
						//被上传的文件路径
						filePath:item,
						//上传文件名称
						name: "file",
						//顺带的文本信息
						formData: {},
						success: (result) => {
						   //2 将返回的图片真实的外网地址追加进urlAft 
						   this.commentAll.urlAft.push(result.data);
						}
					});
				});
			},
			//跳转回待评价页面
			toOrder(){
				uni.navigateTo({url:`/pages/order/order?state=3`})
			}
			
		},
		created() {
			this.infoReceive.score=this.score
		}
	}
</script>
<style lang='scss'>
	$backgroundC:#f9f9f9;
	$borderColor:#f5f5f5;
	$white:#ffffff;
	$fontSize:28upx;
	
	.issue {
		background-color: $backgroundC;
		padding: 20rpx;
		
		&-head{
			background-color: $white;
			height: 100upx;
			border-top: 1upx solid $borderColor;
			border-bottom: 1upx solid $borderColor;
			padding: 0 25upx;
			
			&-pic{
				width: 70upx;
				height: 70upx;
				border-radius: 50%;
				vertical-align: middle;
				margin-right: 17upx;
			}
			&-title{
				line-height: 100upx;
				font-size: 30upx;
				vertical-align: middle;
				margin-right: 35upx;
			}
			
			&-star-box{
				display: inline-block;
				
				image{
					width: 32upx;
					height: 32upx;
					vertical-align: middle;
					margin-right: 14upx;
				}
				image.active{
					animation: star_move ease-in 1 1s,star_rotate ease 1.5s infinite 1s;
				}
			}
		}
		textarea{
			width: 100%;
			height: 850upx;
			background-color: $white;
			font-size: $fontSize;
			color: #898989;
			padding: 24upx;
			box-sizing: border-box;
			line-height: 40upx;
		}
		
		.fb_tool{
			position: absolute;
			margin-right: 590rpx;
			margin-bottom: 280rpx;
			margin-top: 20rpx;
			/* right:0;
			bottom:0; */
			display: flex;
			/* flex-wrap: wrap; */
			padding-bottom: 30rpx;
			button{
				margin: 0;
				width: 90rpx;
				height: 90rpx;
				font-size: 60rpx;
				padding: 0;
				justify-content: center;
				align-items: center;
				margin-left: 20rpx;
				margin-top: 20rpx;
				color: #fa436a;
			}
			.up_img_item{
				margin-left: 20rpx;
				margin-top: 20rpx;
			}
			
		}
		/* 发布按钮 */
		&-btn-box{
			padding: 54upx 80upx;
			margin-top: 110rpx;
			button{
				width: 100%;
				height: 80rpx;
				border-radius: 80upx;
				font-size: $fontSize;
				background-color: #fa436a;
				line-height: 80upx
			}
		}
		
	}
	
	@keyframes star_move{
		from{
			width: 50upx;
			height: 50upx;
			transform: rotate(180deg)
		}
		to{
			width: 32upx;
			height: 32upx;
			transform: rotate(0)
		}
	}
	@keyframes star_rotate{
		0%{
			transform: rotateY(360deg)
		}
		100%{
			transform: rotateY(180deg)
		}
	}
</style>
